<template>
  <el-button type="success" size="small" @click="handleClick">
    <!-- 预留插槽 -->
    <slot></slot>
    选择图标
  </el-button>
  <el-dialog title="图标" v-model="visible" width="30%">
    <el-scrollbar max-height="600px">
      <div class="container">
        <div class="item" v-for="(icon, index) in Object.keys(Icons)" :key="index" @click="copyIcon(`el-icon-${icon.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()}`)">
          <div>
            <component :is="`el-icon-${icon.replace(/(A-Z)g/, '-$1').toLocaleLowerCase()}`" />
          </div>
          <div style="font-size:smaller;">{{ icon }}</div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as Icons from '@element-plus/icons-vue'

let visible = ref(false) //弹窗显示/隐藏
// let emits = defineEmits(['update:visible'])

// 显示弹窗
const handleClick = () => {
  visible.value = true
}
// 关闭弹窗,同时改变属性的值, 否则只能显示一次
// 方法一
// :before-close="close">
// const close = () => {
//   emits('update:visible', !props.visible)
// }

// 方法二
// 监控 visible 的值
// watch(
//   () => props.visible,
//   val => {
//     // console.log(val)
//     emits('update:visible', val) // 修改 visible的值
//   },
// )

// 复制文本到剪板
const copyIcon = (icon: string) => {
  // let input = document.createElement('input')
  // input.value = icon
  // document.body.appendChild(input)
  // input.select()
  // 执行复制
  // document.execCommand('Copy')
  // 删除临时组件
  // document.body.removeChild(input)

  navigator.clipboard.writeText(icon)
  visible.value = false
  // emits('update:visible', false) // 关闭弹窗
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  display: flex;
  width: 25%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  cursor: pointer; // 手形
}

svg {
  width: 2em;
  height: 2em;
}
</style>
